<template>
  <el-dialog :title="title"
    :visible.sync="open"
    :width="`${width}px`"
    append-to-body>
    <el-form ref="viewForm"
      :label-width="`${labelWidth}px`"
      :class="[ isLine && 'formLine' ]">
      <el-form-item :label="item.label"
        v-for="(item, index) in dataList"
        :key="index"
        :style="{ width: item.type == 'text'? formItemWidth: '100%' }">
        <template v-if="item.type == 'text'">
          {{item.value}}
        </template>
        <template v-if="item.type == 'img'">
          <div class="show-img-box">
            <el-image v-for="(val, idx) in item.value"
              :key="idx"
              class="item-img"
              :src="val"
              :preview-src-list="item.value" />
          </div>
        </template>
      </el-form-item>
    </el-form>
    <div slot="footer"
      class="dialog-footer">
      <el-button @click="closeBox">{{$t('common.close')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'showView',
  data () {
    return {

    }
  },
  props: {
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: [Number, String],
      default: 140
    },
    open: {
      type: Boolean,
      default: false
    },
    width: {
      type: [Number, String],
      default: 600
    },
    isLine: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formItemWidth () {
      if (this.isLine) {
        return '50%'
      } else {
        return '100%'
      }
    }
  },
  methods: {
    closeBox () {
      this.$emit('toClose')
    }
  }
}
</script>

<style scoped lang="scss">
.formLine {
  display: flex;
  flex-wrap: wrap;
}
.show-img-box {
  display: flex;
  flex-wrap: wrap;
  .item-img {
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
    border-radius: 4rpx;
    overflow: hidden;
  }
}
</style>